<template>
	<view class="big-box" style="background-color: white;">
		<uni-popup class="pop" ref="popupRef" borderRadius='10px 10px 0px 0px' backgroundColor='white' type="bottom"
			:animation="true" @maskClick="isclose">
			<view class="big">
				<view class="headerBox">
					<view class=""></view>
					<view class="headerBoxWord">选择人数和日期</view>
					<view class="headerBoxIcon" @click="isclose">x</view>
				</view>
				<view class="selectCaedBoxAll">
					<view class="selectCaedBoxNumber">联系信息</view>
					<view class="itemCardbox-info">
						<view>
							<text>姓名</text>
							<input type="text" placeholder="请输入昵称" placeholder-class="placeholderStyle" v-model="contactInfo.name" />
						</view>
						<view>
							<text>电话</text>
							<input type="tel" placeholder="请输入手机号" placeholder-class="placeholderStyle" v-model="contactInfo.Phone" />
						</view>
						<view>
							<text>备注</text>
							<input type="text" placeholder="如有其他需求请填写备注或联系客服" placeholder-class="placeholderStyle" v-model="contactInfo.remark" />
						</view>
					</view>
					<view class="selectCaedBoxNumber">选择日期</view>
					<view class="itemCardboxTIME">
						<view class="isYeartitle">出行日期</view>
						<view class="isYeartitle1" v-if="arrivaltime">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="uni-input">{{arrivaltime}} ></view>
							</picker>
						</view>
						<view class="uni-list-cell-db" v-if="!arrivaltime">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="uni-input">请选择 ></view>
							</picker>
						</view>
					</view>
					<view class="selectCaedBoxNumber">出行人数</view>
					<view class="itemCardbox">
						<view class="selectCaedBox" v-for="(item, index) in allNumber" :key="index">
							<view class="isYear">
								<view class="isYeartitle">{{item.title}}</view>
								<view class="isYearCantect">{{item.contect}}</view>
							</view>
							<view class="numberAll">
								<image @click="isnumbeHow(1, index)" class="jianbutton"
									src="https://file.whshiyuan.cn:9000/toopu/compressed/7831731401125_compressed_img.png"
									mode=""></image>
								<view class="">{{item.number}}</view>
								<image @click="isnumbeHow(2, index)" class="addButton"
									src="https://file.whshiyuan.cn:9000/toopu/compressed/2781731401081_compressed_img.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="itemCardbox">
						<view class="selectCaedBox" v-for="(item, index) in isnextPeopleNumber" :key="index">
							<view class="isYear">
								<view class="isYeartitle">{{item.title}}</view>
								<view class="isYearCantect">{{item.contect}}</view>
							</view>
							<view class="numberAll">
								<image @click="isnumber(1, index)" class="jianbutton"
									src="https://file.whshiyuan.cn:9000/toopu/compressed/7831731401125_compressed_img.png"
									mode=""></image>
								<view class="">{{item.number}}</view>
								<image @click="isnumber(2, index)" class="addButton"
									src="https://file.whshiyuan.cn:9000/toopu/compressed/2781731401081_compressed_img.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<view class="isoverButton" @click="besueFrom">完成</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue';
	import {
		Getnumber,
		Putrevise
	} from '../../../../config/API/Customize';
	const propos = defineProps({
		allNumberitem: {
			type: Array,
			default: () => []
		}
	})
	// 联系人信息
	const contactInfo = ref({
		name:'',
		Phone:'',
		remark:''
	})
	const date = ref();
	const arrivaltime = ref('请选择')
	// 计算属性


	const bindDateChange = (e) => {
		date.value = e.detail.value;
		arrivaltime.value = e.detail.value;
		console.log('选择的时间',date.value)
	};


	const getDate = (type) => {
		const today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth() + 1;
			let day = today.getDate();
		
			// 至少选择明天
			if (type === 'default') {
				today.setDate(today.getDate() + 1); // 明天
				year = today.getFullYear();
				month = today.getMonth() + 1;
				day = today.getDate();
			} else if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
		
			// 确保月份和日期是两位数
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
		
			return `${year}-${month}-${day}`;
	};

	const allNumber = ref([{
			title: '成人',
			contect: '18岁以上',
			number: propos.allNumberitem.adult
		},
		{
			title: '幼童',
			contect: '未满6岁',
			number: propos.allNumberitem.small_kid
		},
		{
			title: '中童',
			contect: '6岁(含)-12岁',
			number: propos.allNumberitem.middle_kid
		},
		{
			title: '大童',
			contect: '12岁(含)-18岁',
			number: propos.allNumberitem.bin_kid
		}
	]);
	const isnextPeopleNumber = ref([{
			title: '含老人',
			contect: '60岁及以上',
			number: propos.allNumberitem.old_man
		},
		{
			title: '含港澳台',
			contect: '',
			number: propos.allNumberitem.hmt_person
		},
		{
			title: '外国人',
			contect: '',
			number: propos.allNumberitem.foreigner
		}
	])
	const emits = defineEmits(['selectEmits','openPopup','closePopup'])
	const popupRef = ref(null);

	// 暴露方法给父组件
	const isnumbeHow = (isAdd, index) => {
		if (isAdd == 2) {
			// 增加数量
			allNumber.value[index].number = allNumber.value[index].number + 1;
		} else {
			// 减少数量
			if (allNumber.value[index].number > 0) {
				allNumber.value[index].number = allNumber.value[index].number - 1;
			}
		}
	};
	const isnumber = (isAdd, index) => {
		if (isAdd == 2) {
			// 增加数量
			isnextPeopleNumber.value[index].number = isnextPeopleNumber.value[index].number + 1;
		} else {
			// 减少数量
			if (isnextPeopleNumber.value[index].number > 0) {
				isnextPeopleNumber.value[index].number = isnextPeopleNumber.value[index].number - 1;
			}
		}
	};
	const isclose = () => {
		emits('closePopup')
		popupRef.value.close();
	}
	const orderidref = ref()
	const exposeMethods = {
		showPopup: async (data, orderid) => {
			orderidref.value = orderid
			getDate('start')
			allNumber.value[0].number = 0
			allNumber.value[1].number = 0
			allNumber.value[2].number =0
			allNumber.value[3].number =0
			isnextPeopleNumber.value[0].number = 0
			isnextPeopleNumber.value[1].number = 0
			isnextPeopleNumber.value[2].number = 0
			popupRef.value.open();
			emits('openPopup')
		},
		closePopup: () => {
			emits('closePopup')
			popupRef.value.close();
		}
	};
	function dateToTimestamp(dateStr) {
	  // 创建一个新的Date对象，传入符合ISO 8601标准的日期字符串
	  var date = new Date(dateStr);
	  // 将Date对象转换为时间戳（毫秒），然后除以1000得到秒
	  return Math.floor(date.getTime() / 1000);
	}

	const besueFrom = async() =>{
		const item = {
			// order_id:orderidref.value,
			adult:allNumber.value[0].number,
			small_kid:allNumber.value[1].number,
			middle_kid:allNumber.value[2].number,
			bin_kid:allNumber.value[3].number,
			arrival_time:arrivaltime.value,
			foreigner:isnextPeopleNumber.value[2].number,
			hmt_person:isnextPeopleNumber.value[1].number,
			old_man:isnextPeopleNumber.value[0].number,
			departure:'成都',
			return:'成都',
			user_name:contactInfo.value.name,
			user_num:contactInfo.value.Phone,
			order_remark:contactInfo.value.remark
		}
		let now = new Date();
		now.setHours(0, 0, 0, 0);
		// 增加一天得到明天的日期
		let tomorrow = new Date(now);
		tomorrow.setDate(now.getDate() + 1);
		// 将Date对象转换为时间戳（毫秒），然后除以1000得到秒
		let timestamp = Math.floor(tomorrow.getTime() / 1000);
		
		const isTime = dateToTimestamp(arrivaltime.value)
		if(!contactInfo.value.name){
			uni.showToast({
				title: '请填写联系人姓名',
				icon: 'none'
			})
		} else if (!contactInfo.value.Phone) {
			uni.showToast({
				title: '请填写正确的手机号',
				icon: 'none'
			});
		} else if (!/^1[3-9]\d{9}$/.test(contactInfo.value.Phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
		}else if (isTime<timestamp||!isTime) {
			uni.showToast({
				title: '时间至少是明天',
				icon: 'none'
			});
		}else if(allNumber.value[0].number==0&&
			allNumber.value[1].number==0&&
			allNumber.value[2].number==0&&
			allNumber.value[3].number==0&&
			isnextPeopleNumber.value[0].number==0&&
			isnextPeopleNumber.value[1].number==0&&
			isnextPeopleNumber.value[2].number==0){
			uni.showToast({
				title: '至少得选择一个人',
				icon: 'none'
			})
		}else {
			emits('selectEmits',item)
			popupRef.value.close();
			console.log('item===》》',item)
		}
	}
	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
	.big-box{
		max-height: 70vh;
		overflow-y: auto;
	}
	.big{
		margin-bottom: 33rpx;
	}
	.headerBoxIcon {
		font-size: 37rpx;
	}

	.headerBoxWord {
		font-size: 34rpx;
	}

	.isoverButton {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: black;
		color: white;
		width: 95vw;
		height: 10vw;
		border-radius: 5rpx;
		margin: 0 auto;
	}

	.selectCaedBoxNumber {
		font-size: 30rpx;
		margin-top: 3vw;
		color: #333333;
		margin-left: 2.5vw;
	}

	.addButton {
		width: 40rpx;
		height: 40rpx;
	}

	.jianbutton {
		width: 35rpx;
		height: 35rpx;
	}

	.itemCardboxTIME {
		height: 10vw;
		margin: 20rpx auto;
		width: 95vw;
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isYeartitle {
		margin-left: 2vw;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.isYeartitle1 {
		margin-right: 2vw;
		color: #333333;
		font-size: 26rpx;
		font-weight: 400;
	}

	.isYearCantect {
		margin-left: 40rpx;
		color: #cccccc;
		font-size: 26rpx;
		font-weight: 300;
	}

	.isYear {
		display: flex;
		align-items: center;
	}

	.itemCardbox {
		margin: 20rpx auto;
		width: 95vw;
		background-color: white;
		border-radius: 10rpx;
	}

	.numberAll {
		width: 20vw;
		margin-right: 2vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selectCaedBox {
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.selectCaedBoxAll {
		width: 100vw;
		background-color: rgb(248, 248, 248);
		padding-top: 10rpx;
	}

	.headerBox {
		width: 95vw;
		display: flex;
		justify-content: space-between;
		margin: 10rpx auto;
	}
	.itemCardbox-info{
		width: 100%;
		margin: 20rpx auto;
		width: 95vw;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
	}
	.itemCardbox-info view{
		display: flex;
		align-items: center;
		gap: 50rpx;
		height: 10vw;
	}
	.itemCardbox-info text{
		margin-left: 2vw;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}
	.itemCardbox-info input{
		width: 75vw;
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}
	/deep/.placeholderStyle{
		color: #cccccc;
		font-size: 26rpx;
		font-weight: 300;
	}
</style>